<template>
  <div>
    <div class="env_content" style="width:100%;height:5%;border-bottom-style:solid;border-color:rgb(9,90,134);display: flex;flex-direction: row;justify-content: space-between;">
      <div style="width:50%;height:100%;display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-end;">
        <div style="width:10%;height:100%;border-bottom-style:solid;border-color:rgb(6,203,255);margin-right: 2%;" />
        <el-radio-group v-model="radio1" class="overstat">
          <el-radio-button label="环境适应度" class="second_button" />
          <el-radio-button label="告警消息" style="margin-left: 5px" class="second_button" />
        </el-radio-group>
      </div>
      <div style="width:5%;height:100%;border-bottom-style:solid;border-color:rgb(6,203,255);" />
    </div>
    <div v-if="radio1=='告警消息'" class="convert1">
      <div v-for="(Item,index) in ArlamData.data" style="width:100%;height: 10%;background-color: rgb(13,50,80);margin-top: 3%;display: flex;flex-direction: row;justify-content: flex-start;align-items: center;">
        <img style="width:30px;height: 30px;margin-left: 15%;" src="@/assets/img/警示.png" alt="">
        <div style="color:white;margin-left: 10%;font-size: 10px;text-align: left;">{{ Item.alarmTime }}<br>{{ Item.alarmInfo }}</div>
      </div>

    </div>
    <div v-if="radio1=='环境适应度'" class="convert2">
      <div class="convertData">
        <chart-line :echarts-data="params[0]" />
      </div>
      <div class="convertData">
        <chart-line :echarts-data="params[1]" />
      </div>
    </div>
  </div>
</template>

<script>
import ChartLine from '@/components/Echart/chartLint.vue'
import {
  getalarmInfo, getHint,
  getpowerElectricity,
  gettriggerAngle, getvalveHallTemperatureHumidity,
  getvalvePower,
  getvalveTowerTemperatureMax,
  getwaterFlowTemperature
} from '../../api/statusMonitor'
export default {
  name: 'EnvContent',
  components: {
    ChartLine
  },
  props: {
    envcontentData: {
      type: Object,
      default: () => {
        return {
          id: ''
        }
      } }
  },
  data() {
    return {

      params: [
        { id: 'test5',
          // xData: [8,20, 30,40,50],
          series: ''
        },
        { id: 'test6',
          // xData: [8,20, 30,40,50],
          series: '' }
      ],
      radio1: '告警消息',
      ArlamData: {
        'msg': '请求数据成功',
        'code': 0,
        'data': [{
          'alarmTime': '2022-04-28 15:01:34',
          'alarmInfo': 'xxx晶闸管IP丢失产生'
        }, {
          'alarmTime': '2022-04-28 15:01:34',
          'alarmInfo': 'xxx晶闸管IP丢失产生'
        }
        ]
      }
    }
  },
  created() {
    this.$nextTick(() => {
      this.getenvData()
    })
  },
  methods: {
    getenvData() {
      getvalveTowerTemperatureMax(this.envcontentData.id).then(response => {
        this.params[0].series = response.data.series
        console.log('EnvContentData')
        console.log(this.envcontentData.id)
      })
      getvalveHallTemperatureHumidity(this.envcontentData.id).then(response => {
        this.params[1].series = response.data.series
      })
      getalarmInfo(this.envcontentData.id).then(response => {
        console.log(response)
        this.ArlamData.data = response.data
      })
    },
    async initChart() {
    }
  }

}
</script>

<style lang="scss" scoped>
::v-deep.el-radio-button{
    &:first-child .el-radio-button__inner{
        border-radius: 0 0 0 0;
    }
}
::v-deep.el-radio-button:first-child .el-radio-button__inner  {
    border-radius: 0 0 0 0 !important;
 }

::v-deep.second_button .el-radio-button__orig-radio:checked + .el-radio-button__inner{
  width: 80px;
  height: 20px;
  color: rgb(255,255,255) !important;
  font-size: 12px;
  background-color: rgb(6,203,255);
  border-radius:0 0 0 0 !important;
}
::v-deep.second_button .el-radio-button__inner{
  width: 80px;
  height: 20px;
  border: none;
  color: rgb(2,126,177) !important;
  font-size: 12px;
  background-color: transparent;
  border-radius:0,0,0,0;
  background-color:rgb(13,63,102);
  text-indent: -8px;
    line-height: 1px;
    border-radius:0 0 0 0 !important;
}
.convert1{
    width: 95%;
    height: 92%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    background-color: rgb(8, 40, 65);
    margin-bottom: 2%;
    align-items: center;
}
.convert2{
    width: 95%;
    height: 92%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    margin-bottom: 2%;
    align-items: center;
}
.convertData{
    width: 100%;
    height: 50%;
}
</style>
